<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>文件导览 - 多数据源 & ES 导入系统</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="/css/style.css">
    <!-- 引入文件导览页面私有样式 -->
    <link rel="stylesheet" href="/css/file-list.css">
</head>
<body>
<div class="container">
    <!-- 页面标题和返回链接 -->
    <h1>📁 文件导览</h1>
    <a href="/index.html" class="back-link">← 返回首页</a>

    <div class="section file-browser-section">
        <!-- 面包屑和搜索栏区域 -->
        <div class="breadcrumb-search-row">
            <!-- 面包屑导航（左侧 70%）-->
            <div class="breadcrumb-container">
                <nav class="breadcrumb" id="breadcrumb">
                    <span class="breadcrumb-item" data-path="">根目录</span>
                </nav>
            </div>

            <!-- 搜索框（右侧 30%）-->
            <div class="search-container">
                <input
                        type="text"
                        id="searchInput"
                        placeholder="搜索文件/文件夹..."
                        autocomplete="off"
                />
                <button id="searchBtn" type="button" title="搜索">🔍</button>
                <button id="uploadBtn" type="button" title="上传文件">📤</button>
            </div>
        </div>

        <!-- 状态消息显示 -->
        <div id="statusMsg" class="status" style="display: none;"></div>

        <!-- 文件列表区域 -->
        <div class="file-list-container">
            <div class="table-wrapper">
                <table id="fileTable">
                    <thead>
                    <tr>
                        <th style="width: 5%;">类型</th>
                        <th style="width: 45%;">名称</th>
                        <th style="width: 15%;">大小</th>
                        <th style="width: 20%;">修改时间</th>
                        <th style="width: 15%;">扩展名</th>
                    </tr>
                    </thead>
                    <tbody id="fileTableBody">
                    <!-- 动态加载的文件列表 -->
                    <tr>
                        <td colspan="5" style="text-align: center; color: #7f8c8d;">
                            正在加载...
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Toast提示容器 -->
<div id="toastContainer" class="toast-container"></div>

<!-- 上传文件模态框 -->
<div id="uploadModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">📤 上传文件</h3>
            <span class="close" id="uploadModalClose">&times;</span>
        </div>

        <div class="upload-form">
            <!-- 子目录输入框 -->
            <label for="subDirectory">子目录路径（可选）</label>
            <input
                    type="text"
                    id="subDirectory"
                    placeholder="例如: folder1/folder2"
                    autocomplete="off"
            />
            <p class="input-hint">如果留空，将上传到当前目录。格式：xxx/xxx 或 xxx/xxx/xxx</p>

            <!-- 文件选择器 -->
            <label for="fileInput">选择文件（仅支持 JSON 格式）</label>
            <input
                    type="file"
                    id="fileInput"
                    accept=".json"
            />

            <!-- 上传状态消息 -->
            <div id="uploadStatus" class="status" style="display: none; margin-top: 12px;"></div>
        </div>

        <div class="modal-footer">
            <button id="confirmUploadBtn" type="button">确认上传</button>
            <button id="cancelUploadBtn" type="button" class="btn-secondary">取消</button>
        </div>
    </div>
</div>

<!-- 查看JSON文件模态框 -->
<div id="viewJsonModal" class="modal">
    <div class="modal-content modal-json-viewer">
        <div class="modal-header">
            <h3 class="modal-title" id="jsonFileName">📄 查看文件</h3>
            <span class="close" id="viewJsonModalClose">&times;</span>
        </div>

        <!-- JSON工具栏 -->
        <div class="json-toolbar">
            <div class="json-toolbar-left">
                <button id="formatJsonBtn" type="button" class="btn-format">
                    <span id="formatBtnIcon">📄</span>
                    <span id="formatBtnText">原始</span>
                </button>
                <span class="json-info" id="jsonInfo"></span>
            </div>

            <div class="json-toolbar-right">
                <!-- 搜索功能区 -->
                <div class="json-search-box">
                    <input
                            type="text"
                            id="jsonSearchInput"
                            placeholder="搜索内容..."
                            autocomplete="off"
                    />
                    <button id="jsonSearchBtn" type="button" class="btn-search" title="搜索 (Enter)">
                        🔍
                    </button>
                </div>

                <!-- 搜索结果导航 -->
                <div class="json-search-nav" id="jsonSearchNav" style="display: none;">
                    <span class="search-count" id="searchCount">0/0</span>
                    <button id="searchPrevBtn" type="button" class="btn-nav" title="上一个 (Shift+Enter)">
                        ↑
                    </button>
                    <button id="searchNextBtn" type="button" class="btn-nav" title="下一个 (Enter)">
                        ↓
                    </button>
                    <button id="searchClearBtn" type="button" class="btn-clear" title="清除 (ESC)">
                        ✕
                    </button>
                </div>
            </div>
        </div>

        <!-- JSON内容显示区域 -->
        <div class="json-content-container">
            <pre id="jsonContent" class="json-content"></pre>
        </div>

        <!-- 状态消息 -->
        <div id="viewJsonStatus" class="status" style="display: none; margin-top: 12px;"></div>

        <div class="modal-footer">
            <button id="copyJsonBtn" type="button" class="btn-secondary">📋 复制</button>
            <button id="closeJsonViewBtn" type="button" class="btn-secondary">关闭</button>
        </div>
    </div>
</div>

<!-- 引入依赖的 JS 文件 -->
<script src="/js/api.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/file-list.js"></script>
</body>
</html>
